<!--
 * @Author: Cenven
 * @Date: 2021-07-05 10:18:55
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-09-16 16:03:39
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="fraction-count">
    <template v-if="is_manual_correct == 1">
      <div class="fraction-count-container">
        <div class="test_title">
          <p>亲爱的学员{{ user_info.acName }}</p>
          <p>您本次考试完成，考试成绩届时会在考试记录中显示！</p>
        </div>
        <div class="fraction-son">
          <img src="/img/mobile/fraction-son.png" alt="" />
        </div>
        <div class="btn-list">
          <div
            class="btn-item btn-left"
            @click="toQuestionDetail"
            style="margin: auto;"
          >
            返回题库
          </div>
          <!-- <div
            class="btn-item btn-left"
            @click="toTestRecord"
            style="margin: auto;"
          >
            考试记录
          </div> -->
        </div>
      </div>
    </template>
    <template v-else>
      <div class="fraction-count-container">
        <div class="test_title">
          <p>亲爱的学员{{ user_info.acName }}</p>
          <p>您本次考试《{{ paperDetail.name }}》成绩为</p>
        </div>
        <div class="test_fraction">
          <span class="fraction-sum">{{ testRecord.score }}</span>
          <span>分</span>
        </div>
        <div class="btn-list">
          <div class="btn-item btn-left" @click="wrongQuestionHandle">
            本次错题
          </div>
          <div class="btn-item btn-right" @click="testReview">考试回顾</div>
        </div>
        <div class="fraction-tips">
          <span v-if="testRecord.score >= paperDetail.passScore"
            >您本次成绩及格啦～，要不断超越自己哦！</span
          >
          <span v-else>您本次成绩不及格哟～，要继续加油哦！</span>
        </div>
        <div class="fraction-son">
          <img src="/img/mobile/fraction-son.png" alt="" />
        </div>
      </div>
    </template>
    <div class="wrong_dialog" v-show="type == 'wrong'">
      <div class="wrong_box">
        <Icon
          class="close_dialog"
          @click="$router.back()"
          type="md-close"
          size="30"
        />
        <ul class="wrong_list">
          <li class="wrong_item" v-if="all_statistics.single.length > 0">
            <div class="item_left">
              <span class="serial_number">{{ findObjKeyIndex("single") }}</span>
              <span class="question_name"
                >单选题({{ all_statistics.single.length }})</span
              >
            </div>
            <div class="item_right">
              <span class="accuracy_count">正确率：{{ accuracy(1) }}%</span>
              &emsp;&emsp;
              <span class="wrong_count"
                >错误{{ wrong_statistics.single.length }}道</span
              >
            </div>
          </li>
          <li class="wrong_item" v-if="all_statistics.multiple.length > 0">
            <div class="item_left">
              <span class="serial_number">{{ findObjKeyIndex("multiple") }}</span>
              <span class="question_name"
                >多选题({{ all_statistics.multiple.length }})</span
              >
            </div>
            <div class="item_right">
              <span class="accuracy_count">正确率：{{ accuracy(2) }}%</span>
              &emsp;&emsp;
              <span class="wrong_count"
                >错误{{ wrong_statistics.multiple.length }}道</span
              >
            </div>
          </li>
          <li class="wrong_item" v-if="all_statistics.short.length > 0">
            <div class="item_left">
              <span class="serial_number">{{ findObjKeyIndex("short") }}</span>
              <span class="question_name"
                >简答题({{ all_statistics.short.length }})</span
              >
            </div>
            <div class="item_right">
              <span class="accuracy_count">正确率：{{ accuracy(3) }}%</span>
              &emsp;&emsp;
              <span class="wrong_count"
                >错误{{ wrong_statistics.short.length }}道</span
              >
            </div>
          </li>
          <li class="wrong_item" v-if="all_statistics.cloze.length > 0">
            <div class="item_left">
              <span class="serial_number">{{ findObjKeyIndex("cloze") }}</span>
              <span class="question_name"
                >填空题({{ all_statistics.cloze.length }})</span
              >
            </div>
            <div class="item_right">
              <span class="accuracy_count">正确率：{{ accuracy(4) }}%</span>
              &emsp;&emsp;
              <span class="wrong_count"
                >错误{{ wrong_statistics.cloze.length }}道</span
              >
            </div>
          </li>
          <li class="wrong_item" v-if="all_statistics.judgment.length > 0">
            <div class="item_left">
              <span class="serial_number">{{ findObjKeyIndex("judgment") }}</span>
              <span class="question_name"
                >判断题({{ all_statistics.judgment.length }})</span
              >
            </div>
            <div class="item_right">
              <span class="accuracy_count">正确率：{{ accuracy(5) }}%</span>
              &emsp;&emsp;
              <span class="wrong_count"
                >错误{{ wrong_statistics.judgment.length }}道</span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getTestReview,
  getQuestionBankPaperOne
} from "~/api/v2-question-bank/question-bank.js";
export default {
  name: "fraction-count",
  components: {},
  data() {
    return {
      scroll: 0,
      /* 考试记录详情 */
      testRecord: {
        score: ""
      },
      /* 各个题型错误的题数 */
      wrong_statistics: {
        single: [],
        multiple: [],
        short: [],
        cloze: [],
        judgment: []
      },
      /** 试卷各个题型的题数 */
      all_statistics: {
        single: [],
        multiple: [],
        short: [],
        cloze: [],
        judgment: []
      },
      /* 试卷详情 */
      paperDetail: {
        name: ""
      }
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      shallowColor(state) {
        return state.web_info.THEME_COLOR + "32";
      }
    }),
    type() {
      return this.$route.query.type;
    },
    /* 题库ID */
    questionId() {
      return this.$route.query.questionId;
    },
    /* 考试记录Id */
    testRecordId() {
      return this.$route.query.testRecordId;
    },
    /* 考试类型 */
    testType() {
      return this.$route.query.testType;
    },
    /* 试卷Id */
    testId() {
      return this.$route.query.testId;
    },
    /* 是否是手动改卷 */
    is_manual_correct() {
      const { is_manual_correct } = this.$route.query;
      return is_manual_correct ? Number(is_manual_correct) : 0;
    },
    /* 是否从考试页面进来 */
    is_just_test() {
      return this.$route.query.is_just_test;
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    findObjKeyIndex(type) {
      let keys = [];
      for (let item in this.all_statistics) {
        console.log(this.all_statistics[item]);
        if (this.all_statistics[item].length > 0) {
          keys = [...keys, item];
        }
      }
      return keys.findIndex(item => item == type) + 1;
    },
    accuracy(type) {
      switch (type) {
        case 1:
          if (
            this.all_statistics.single.length -
              this.wrong_statistics.single.length ==
            0
          ) {
            return 0;
          } else {
            return (
              (
                (this.all_statistics.single.length -
                  this.wrong_statistics.single.length) /
                this.all_statistics.single.length
              ).toFixed(2) * 100
            );
          }
        case 2:
          if (
            this.all_statistics.multiple.length -
              this.wrong_statistics.multiple.length ==
            0
          ) {
            return 0;
          } else {
            return (
              (
                (this.all_statistics.multiple.length -
                  this.wrong_statistics.multiple.length) /
                this.all_statistics.multiple.length
              ).toFixed(2) * 100
            );
          }
        case 3:
          if (
            this.all_statistics.short.length -
              this.wrong_statistics.short.length ==
            0
          ) {
            return 0;
          } else {
            return (
              (
                (this.all_statistics.short.length -
                  this.wrong_statistics.short.length) /
                this.all_statistics.short.length
              ).toFixed(2) * 100
            );
          }
        case 4:
          if (
            this.all_statistics.cloze.length -
              this.wrong_statistics.cloze.length ==
            0
          ) {
            return 0;
          } else {
            return (
              (
                (this.all_statistics.cloze.length -
                  this.wrong_statistics.cloze.length) /
                this.all_statistics.cloze.length
              ).toFixed(2) * 100
            );
          }
        case 5:
          if (
            this.all_statistics.judgment.length -
              this.wrong_statistics.judgment.length ==
            0
          ) {
            return 0;
          } else {
            return (
              (
                (this.all_statistics.judgment.length -
                  this.wrong_statistics.judgment.length) /
                this.all_statistics.judgment.length
              ).toFixed(2) * 100
            );
          }
        default:
          return 0;
      }
    },
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    },
    toBack() {
      if (this.is_just_test) {
        this.$router.back();
        this.$router.back();
        this.$router.back();
      } else {
        this.$router.back();
      }
    },
    wrongQuestionHandle() {
      console.log("查看错题");
      this.$router.push({
        path: "/fraction-count",
        query: {
          type: "wrong",
          testType: this.testType,
          testRecordId: this.testRecordId
        }
      });
    },
    /* 考试回顾 */
    testReview() {
      this.$router.push({
        path: "/question-test",
        query: {
          type: this.testType,
          testRecord: this.testRecordId,
          testId: this.testId,
          review: 1
        }
      });
    },
    /* 获取考试记录详情 */
    async getTestReview() {
      this.SET_IS_LOADING(true);
      let params = {
        id: this.testRecordId
      };
      let result = await getTestReview(params);
      console.log("获取考试记录详情:", result);
      if (result && result.data && result.data.data) {
        const { data } = result.data;
        this.testRecord = data;
        const { items } = data;
        this.wrong_statistics = {
          single: items.filter(
            i =>
              i.questionType == 1 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          multiple: items.filter(
            i =>
              i.questionType == 2 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          short: items.filter(
            i =>
              i.questionType == 3 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          cloze: items.filter(
            i =>
              i.questionType == 4 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          ),
          judgment: items.filter(
            i =>
              i.questionType == 5 &&
              ["w", "u", "hc"].includes(i.doneQuestionType)
          )
        };
        this.all_statistics = {
          single: items.filter(i => i.questionType == 1),
          multiple: items.filter(i => i.questionType == 2),
          short: items.filter(i => i.questionType == 3),
          cloze: items.filter(i => i.questionType == 4),
          judgment: items.filter(i => i.questionType == 5)
        };
      }
      this.SET_IS_LOADING(false);
    },
    /* 获取试卷详情 */
    async getQuestionBankPaperOne() {
      this.SET_IS_LOADING(true);
      let result = await getQuestionBankPaperOne(this.testId);
      console.log("获取试卷详情：", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        if (data) {
          this.paperDetail = {
            ...this.paperDetail,
            ...data,
            span: Number(data.span) * 60 * 1000
          };
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 跳转考试记录 */
    toTestRecord() {
      this.$router.push({
        path: "/m/v2-test-record",
        query: {
          questionType: this.testType,
          id: this.questionId
        }
      });
    },
    // 返回题库
    toQuestionDetail(){
      this.$router.push({
        path: "/classroom?action=myquestion&questionId=" + this.questionId,
      });
    },
    initPage() {
      this.getQuestionBankPaperOne();
      this.getTestReview();
    }
  },
  created() {
    this.initPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.fraction-count {
  width: 100%;
  min-height: 100vh;
  position: relative;
  .wrong_dialog {
    position: fixed;
    z-index: 1306;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(55, 55, 55, 0.6);
    .wrong_box {
      width: 416px;
      margin: auto;
      height: 400px;
      border-radius: 6px;
      background: #ffffff;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .wrong_list {
        box-sizing: border-box;
        padding: 50px 20px;
        .wrong_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #ededf1;
              padding: 10px 0;
          &:last-child{
            border-bottom: none;
          }
          .item_left {
            .serial_number {
              display: inline-block;
              width: 30px;
              height: 30px;
              line-height: 30px;
              border-radius: 50%;
              background-color: var(--theme-color);
              text-align: center;
              font-size: 16px;
              color: #ffffff;
              box-shadow: 0 1px 1px 0 rgba(48, 124, 255, 0.2);
            }
            .question_name {
              margin-left: 10px;
              font-size: 16px;
              font-weight: bold;
            }
          }
          .item_right {
            display: flex;
            font-size: 16px;
            .accuracy_count {
              display: inline-block;
              width: 100px;
              color: #949699;
            }
            .wrong_count {
              color: #949699;
            }
          }
        }
      }
      .close_dialog {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }
  }
  .fraction-count-container {
    width: 800px;
    height: 500px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    .test_title {
      font-size: 20px;
      text-align: center;
      line-height: 40px;
      padding: 20px 0;
    }
    .test_fraction {
      color: #f39090;
      font-size: 30px;
      text-align: center;
      .fraction-sum {
        font-size: 30px;
      }
    }
    .btn-list {
      padding: 30px 100px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f7f7fa;
      .btn-item {
        width: 120px;
        height: 40px;
        background-color: var(--theme-color);
        border-radius: 20px;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
      }
    }
    .fraction-tips {
      font-size: 16px;
      padding: 10px 10px;
      text-align: center;
      color: #949699;
    }
    .fraction-son {
      width: 186px;
      height: 153px;
      margin: 10px auto;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
